import React, {useState, forwardRef, useImperativeHandle, useRef, useEffect} from 'react';
import {Avatar, Button, Modal, Space} from "antd";
import {UserOutlined} from "@ant-design/icons";
import {store} from "../../store/store";
import SetPersonalData from "./SetPersonalData";
import {getUser} from "./PersonalDataApi";

const PersonalData = forwardRef((props, ref) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const user = store.getState().UserRedux.user;
    const url = user ? user.userPhotoUrl : ''
    const setPersonalDataRef = useRef()
    const [userData, setUserData] = useState({})

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    useImperativeHandle(ref, () => {
        return {
            showModal
        }
    })

    // 获取当前用户数据
    const getUserfun = () => {
        const json = {userNumber: user.userNumber}
        getUser(json).then(res => {
            if (res.code === '200') {
                setUserData({
                    userEmail: res.data[0].userEmail,
                    userName: res.data[0].userName,
                    userNumber: res.data[0].userNumber,
                    userPhone: res.data[0].userPhone,
                    userSex: res.data[0].userSex,
                    userPhotoUrl: res.data[0].userPhotoUrl,
                })
            }
        })
    }

    useEffect(() => {
        if (!isModalOpen) return;
        if (!user) return;
        getUserfun()
    }, [isModalOpen])

    return (
        <>
            <Modal title="我的资料~~"
                   width={400}
                   open={isModalOpen}
                   footer=""
                   onCancel={handleCancel}>
                <div style={{display: "flex", justifyContent: "center"}}>
                    <Avatar src={url} style={{backgroundColor: '#CCCCCC'}} size={64} icon={<UserOutlined/>}/>
                </div>
                <div style={{textAlign: 'center'}}>
                    <p style={{marginTop: '10px'}}><span>账号：</span><span>{userData.userNumber}</span></p>
                    <p style={{marginTop: '10px'}}><span>昵称：</span><span>{userData.userName}</span></p>
                    <p style={{marginTop: '10px'}}><span>性别：</span><span>{userData.userSex}</span></p>
                    <p style={{marginTop: '10px'}}><span>手机号码：</span><span>{userData.userPhone}</span></p>
                    <p style={{marginTop: '10px'}}><span>邮箱：</span><span>{userData.userEmail}</span></p>
                </div>
                <div style={{marginTop: '20px', display: 'flex', justifyContent: 'center'}}>
                    <Space> <Button onClick={handleCancel}>关闭</Button></Space>
                    <Space> <Button type="primary" onClick={() => {
                        setPersonalDataRef.current.showModal()
                    }}>修改</Button></Space>
                </div>
            </Modal>
            <SetPersonalData getUserfun={getUserfun} userData={userData} ref={setPersonalDataRef}></SetPersonalData>
        </>
    );
})

export default PersonalData;
